<%-- 
  - Author:Asna Khader
  - Date: 06-Mar-2012
  - Copyright Notice: TRAKHEES
  - Description: show.jsp
 --%>
<%@ include file="/WEB-INF/view/include.jsp"%>

<!--<div id="search_container1">
 <form:form modelAttribute="ReportsInfo" name="ReportFrm"  id="ReportFrm"  method="POST" enctype="multipart/form-data" class="t_form">
 	 
 	    <div class="t_search_heading"><spring:message code="label.sel_report" /></div>
 	    <div  class="t_form-left">
		 	  	<div>
		        	<label class="label-search"><spring:message code="label.sel_rep_to_display" /></label>
		        </div>
		        <div>
		        		<form:select path="selectedReport" id="selectedReport" onchange="showFilterCriteria(this.value);"  style="width:230px;">
				                 <form:option value="0">Client Prepaid Actual Account Report</form:option>
				                  <form:option value="1">Client Reserved Account Report</form:option>
				                  <form:option value="2">Client & Employee Master Report</form:option>
				                  <form:option value="3">CLD ONLINE Customer Transaction Master Details</form:option>
		         		</form:select>
		        </div> 
        </div> 

      	<div class="t_search_heading"><spring:message code="label.report_search" /></div> 
      	
      	      	  	<div id="sec1" style="border: 1" >

      				 <div  class="t_form-left">
              				<div><form:label path="dateFrom"><spring:message code="label.date_from" /><span class="required-field"><spring:message code="label.field.required" /></span></form:label></div>
             				<div><form:input path="dateFrom" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
       				 </div>

      					<div  class="t_form-right">
              				<div><form:label path="dateTo"><spring:message code="label.label_to" /><span class="required-field"><spring:message code="label.field.required" /></span></form:label></div>
             				<div><form:input path="dateTo" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
        				</div>

      	</div>
      	
      	<div id="sec2" style="border: 1">
      		<div class="t_form-left">
      				<div>
              				<div><form:label path="empName"><spring:message code="label.empName" /></form:label></div>
             				<div><form:input path="empName" cssClass="t_form-fld-disable" maxlength="30" /></div>
       				 </div>
       				 
       				 <div>
              				<div><form:label path="rpExpiryDateFrom"><spring:message code="label.rpExpiryDateFrom" /></form:label></div>
             				<div><form:input path="rpExpiryDateFrom" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
       				 </div>
       				 
       				 <div>
              				<div><form:label path="epExpiryDateFrom"><spring:message code="label.epExpiryDateFrom" /></form:label></div>
             				<div><form:input path="epExpiryDateFrom" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
       				 </div>
       				 
       				 <div>
              				<div><form:label path="empStatus"><spring:message code="label.empStatus" /></form:label></div>
             				<div><form:input path="empStatus" cssClass="t_form-fld-disable" maxlength="30" /></div>
       				 </div>
       				 
      		</div>
      		
      		<div class="t_form-right">
      				<div>
              				<div><form:label path="passportNo"><spring:message code="label.passport_no" /></form:label></div>
             				<div><form:input path="passportNo" cssClass="t_form-fld-disable" maxlength="30" /></div>
        			</div>
        			<div>
              				<div><form:label path="rpExpiryDateTo"><spring:message code="label.rpExpiryDateTo" /></form:label></div>
             				<div><form:input path="rpExpiryDateTo" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
        			</div>
        			<div>
              				<div><form:label path="epExpiryDateTo"><spring:message code="label.epExpiryDateTo" /></form:label></div>
             				<div><form:input path="epExpiryDateTo" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
        			</div>
        			<div>
              				<div><form:label path="nationality"><spring:message code="label.nationality" /></form:label></div>
             				<div>    
	             				 <c:choose>
									<c:when	test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
										<div><form:select path="nationality" items="${countryList}" itemLabel="labelAr" itemValue="id" /></div>
									</c:when>
									<c:otherwise>
										<div><form:select path="nationality" items="${countryList}" itemLabel="labelEn" itemValue="id" /></div>
									</c:otherwise>
								</c:choose> 
							</div>
        			</div>
      		</div>
      	</div>
      	
      	<div id="sec3" style="border: 1">
      	
      			<div class="t_form-left">
      				<div>
              				<div><form:label path="transactionNo"><spring:message code="label.transactionNo" /></form:label></div>
             				<div><form:input path="transactionNo" cssClass="t_form-fld-disable" maxlength="30" /></div>
       				 </div>
       				 <div>
              				<div><form:label path="transactionDateFrom"><spring:message code="label.transactionDateFrom" /><span class="required-field"><spring:message code="label.field.required" /></span></form:label></div>
             				<div><form:input path="transactionDateFrom" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
       				 </div>
       				 <div>
              				<div><form:label path="transactionStatus"><spring:message code="label.transactionStatus" /></form:label></div>
             				<div>
             					<form:select path="transactionStatus" id="transactionStatus" >
             						<form:option value=""></form:option>
				                 	<form:option value="R">In Progress</form:option>
				                  	<form:option value="I">Rejected</form:option>
				                  	<form:option value="A">Completed</form:option>
		         				</form:select>
             				</div>
       				 </div>
      			</div>
      			
     			<div class="t_form-right">
     				<div>
              				<div><form:label path="candidateName"><spring:message code="label.candidateName" /></form:label></div>
             				<div><form:input path="candidateName" cssClass="t_form-fld-disable" maxlength="30" /></div>
        			</div>
        			<div>
              				<div><form:label path="transactionDateTo"><spring:message code="label.transactionDateTo" /><span class="required-field"><spring:message code="label.field.required" /></span></form:label></div>
             				<div><form:input path="transactionDateTo" cssClass="t_form-fld-disable_calendar"  style="*-float:left;" /></div>
        			</div>
        			<div>
              				<div><form:label path="processName"><spring:message code="label.processName" /></form:label></div>
             				<div>
             					<form:select path="processName" id="processName" >
             						<form:option value=""></form:option>
				                 	<form:option value="EV">Employment Visa</form:option>
				                  	<form:option value="ER">Renew Employment Visa </form:option>
				                  	<form:option value="ET">Terminate Employment Visa</form:option>
				                  	<form:option value="NV">Visit Visa</form:option>
				                  	<form:option value="CV">Visit Visa Cancel</form:option>
				                  	<form:option value="NI">NOC and Letters</form:option>
		         				</form:select>
             				</div>
        			</div>
     				
     			</div>
      	</div>
        
      	<div id="FNPPaymentInfoTab" class="t_pop_up"> 
	     </div>
	        	<div id="backgroundPopup"></div>
              
      <div class="t_search_btns">
   			 <%-- <button type="button"   id="exportBtn" class="button_small" onclick="showReport('ReportFrm','Show');"><spring:message code="button.report_show" /></button> --%>
   			 <button type="button" onclick="if(validate(selectedReport,'Excel')){submit();}" id="Excel" name="Excel" class="button_small" >Excel</button>
   			 <button type="button" onclick="if(validate(selectedReport,'PDF')){submit();}" id="PDF" name="PDF" class="button_small" >PDF</button>
      </div>
     <form:input path="reportType" id="reportType" />
     
     </form:form>
 </div>
 <script>

	jQuery(document).ready(function() {
		$(".topnav").accordion({
			accordion:false,
			speed: 500,
			closedSign: '<img src=\'resources/images/common/close.jpg\' />',
			openedSign: '<img src=\'resources/images/common/open.jpg\' />'
		});
		
		$( "#epExpiryDateTo,#epExpiryDateFrom,#rpExpiryDateTo,#rpExpiryDateFrom,#dateFrom,#dateTo,#transactionDateFrom,#transactionDateTo").datepicker({
			showOn: "button",
			buttonImage: "resources/images/calender.jpg",
			dateFormat : 'dd/mm/yy',
			buttonImageOnly: true,
			changeMonth:true,
			changeYear:true,
			minDate: new Date(1900,1 - 1 ,1),
			yearRange:'c-50:c+10'
		});
		
		$("#sec1").show();
		$("#sec2").hide();
		$("#sec3").hide();
		$("#reportType").hide();
		
		
	  	$.validator.addMethod(
				"dateFormatValid", 
				function(value, element) {
					if(value!==null && value!==''){
						return !!Date.parseExact(value, 'dd/MM/yyyy');
					}else{
						return true;
					}
	        				
	    });
    	$.validator.addMethod(
				"pastDate", 
				function(value,element) {
							var issueDate = Date.parseExact(value, 'dd/MM/yyyy');
	        				var today = new Date();
	        				return (issueDate < today);
	   	});
     	$.validator.addMethod(
				"fromDateGreaterThanToDate", 
				function() {
							var dateFrom = new Date(formatDate($("#dateFrom").val()));
							var dateTo = new Date(formatDate($("#dateTo").val()));
	        				return (dateFrom <= dateTo);
	   	});
     	
     	$.validator.addMethod(
				"rpfromDateGreaterThanToDate", 
				function() {
					if(($("#rpExpiryDateFrom").val() !=null) && ($("#rpExpiryDateFrom").val() !="" ) && (($("#rpExpiryDateTo").val() !=null) && ($("#rpExpiryDateTo").val() !="" ))){
						var dateFrom1 = new Date(formatDate($("#rpExpiryDateFrom").val()));
						var dateTo1 = new Date(formatDate($("#rpExpiryDateTo").val()));
        				return (dateFrom1 <= dateTo1);
					}else{
						return true;
					}
							
	   	});
     	
     	$.validator.addMethod(
				"epfromDateGreaterThanToDate", 
				function() {
					if(($("#epExpiryDateFrom").val() !=null) && ($("#epExpiryDateFrom").val() !="" ) && (($("#epExpiryDateTo").val() !=null) && ($("#epExpiryDateTo").val() !="" ))){
							var dateFrom = new Date(formatDate($("#epExpiryDateFrom").val()));
							var dateTo = new Date(formatDate($("#epExpiryDateTo").val()));
	        				return (dateFrom <= dateTo);
					}else{
						return true;
					}
	   	});
     	
     	$.validator.addMethod(
				"transfromDateGreaterThanToDate", 
				function() {
				if(($("#transactionDateFrom").val() !=null) && ($("#transactionDateFrom").val() !="" ) && (($("#transactionDateTo").val() !=null) && ($("#transactionDateTo").val() !="" ))){
							var dateFrom = new Date(formatDate($("#transactionDateFrom").val()));
							var dateTo = new Date(formatDate($("#transactionDateTo").val()));
	        				return (dateFrom <= dateTo);
				}else{
					return true;
				}
	   	});
    	
		$("#ReportFrm").validate({
			onfocusout:false,
			onkeyup:false,
			onclick: false,			
			rules : {
				dateFrom: {// compound rule
					required : true,
					dateFormatValid : true,
					pastDate:true
				}, 
		
				dateTo: {// compound rule
					required : true,
					dateFormatValid : true,
					pastDate:true,
					fromDateGreaterThanToDate:true,
				},
				
				rpExpiryDateFrom: {// compound rule
					required : false,
					dateFormatValid : true,
					pastDate:true
				}, 
		
				rpExpiryDateTo: {// compound rule
					required : false,
					dateFormatValid : true,
					pastDate:true,
					rpfromDateGreaterThanToDate:true
				},
				
				epExpiryDateFrom: {// compound rule
					required : false,
					dateFormatValid : true,
					pastDate:true
				}, 
		
				epExpiryDateTo: {// compound rule
					required : false,
					dateFormatValid : true,
					pastDate:true,
					epfromDateGreaterThanToDate:true
				},
				transactionDateFrom: {// compound rule
					required : true,
					dateFormatValid : true,
					pastDate:true
				}, 
		
				transactionDateTo: {// compound rule
					required : true,
					dateFormatValid : true,
					pastDate:true,
					transfromDateGreaterThanToDate:true
				},
		
			},
			
			submitHandler: function (form) {
				blockPage();
				form.submit();
			},
			
			showErrors : function(errorMap, errorList) {
				
				var errors = '<ul>';
				var label;				
				if (errorList.length) {
					$.each(errorMap, function(name, value) {
						label = $("label[for='" + name + "']").html();
						label = value + '[' + label + ']';
						errors = errors + '<li>' + label + '</li>';
						

					});
					errors = errors + '</ul>';
					jAlert('error', errors, '<spring:message code="label.errormessage" />');
					return false;
				}
			}		
		});// end $("#EmploymentVisaFrm").validate
		
	});
	function showFilterCriteria(id){
		if(id==0 || id ==1){
			$("#sec1").show();
			$("#sec2").hide();
			$("#sec3").hide();
		}else if(id==2){
			$("#sec1").hide();
			$("#sec2").show();
			$("#sec3").hide();
			
		}else{
			$("#sec1").hide();
			$("#sec2").hide();
			$("#sec3").show();
			
		}
	}
	
	function validate(selectedReport,reportType){
		id =  selectedReport.value;
		document.getElementById("reportType").value = reportType;
		var result = true;
		if(id==0 || id ==1){
			(
					result = result && $("#ReportFrm").validate().element("#dateFrom") 
					&& $("#ReportFrm").validate().element("#dateTo")
			);
		}else if(id==2){
			(
					result = result && $("#ReportFrm").validate().element("#rpExpiryDateFrom") 
					 && $("#ReportFrm").validate().element("#rpExpiryDateTo") 
					&& $("#ReportFrm").validate().element("#epExpiryDateFrom") 
					 && $("#ReportFrm").validate().element("#epExpiryDateTo") 
			);
			
		}else{
			(
					result = result && $("#ReportFrm").validate().element("#transactionDateFrom") 
					&& $("#ReportFrm").validate().element("#transactionDateTo")
			);
			
		}
		return result;
	}
	function submitForm(selectedReport,reportType){
		$("#reportType").value = reportType;
		 if(validate(selectedReport)){
			submit();
		} 
	}
</script> -->
 